<template>
	<view class="index">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title=" " color="#000"
			backgroundColor="">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<view class="two-box">
			<view class="box-header flex-y-center">
				<image class="logo" src="../../static/logo-180.png" mode=""></image>
				<view class="pl-md">
					<view class="c-title f-lg-title text-bold">欢迎来到家政app</view>
					<view class="f-paragraph c-title-desc">请选登录方式</view>
				</view>
			</view>
			<view class="pl-lg pr-lg box-item radius-16 flex-between">
				<view class="flex-y-center">
					<image src="../../static/login/wechat.png" mode="aspectFill"></image>
					<view class="pl-md c-title f-min-title text-bold">微信登录</view>
				</view>
				<view class="iconfont icongengduo" :style="{color:primaryColor}"></view>
			</view>
			<view class="pl-lg pr-lg box-item mt-lg radius-16 flex-between">
				<view class="flex-y-center">
					<image src="../../static/login/phone.png" mode="aspectFill"></image>
					<view class="pl-md c-title f-min-title text-bold">手机号登录</view>
				</view>
				<view class="iconfont icongengduo" :style="{color:primaryColor}"></view>
			</view>
			<view class=" pt-lg flex-center">
				<view class="flex pt-sm" @tap="isCheck = !isCheck ">
					<view class="icon-xuanze iconfont c-caption" v-if="!isCheck" ></view>
					<view class="iconjishiwancheng iconfont" v-else :style="{color:primaryColor}"></view>
					<view class="f-caption box-text pl-sm">
						<text>注册即表示您已详细阅读并同意</text><text :style="{color:primaryColor}">《用户协议》</text><text>于</text>
						<view class="pt-sm" :style="{color:primaryColor}">《个人信息保护指引》</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import pwPopup from '@/components/pw-popup.vue'
	export default {
		components:{pwPopup},
		data() {
			return{
				isCheck:false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
		}),
		onLoad() {
		},
		methods:{
			confirm(){
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.two-box{
		padding: 0 60rpx;
		.box-header{
			padding: 70rpx 0;
			.logo{
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
			}
		}
		.box-item{
			height: 140rpx;
			background-color: #F6F7FB;
			image{
				width: 88rpx;
				height: 88rpx;
			}
		}
		.box-text{
			letter-spacing: 1px;
			line-height: 32rpx;
			color: #6C727F;
		}
	}
</style>